<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pc项目 商品详情</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- topbar -start -->
    <div class="topbar">
        <div class="container">
            <div class="topbar-left">
                欢迎来到尚品汇！ 请
                <a href="">登录</a>
                <a href="">免费注册</a>
            </div>
            <nav class="topbar-nav">
                <a href="">我的订单</a>
                <a href="">我的购物车</a>
                <a href="">我的尚品汇</a>
                <a href="">尚品汇会员</a>
                <a href="">企业采购</a>
                <a href="">关注尚品汇</a>
                <a href="">合作招商</a>
                <a href="">商家后台</a>
            </nav>
        </div>
    </div>
    <!-- topbar -end -->
    <!--log和搜索框 -start -->
    <div class="page-header">
        <div class="container">
            <a href="#" class="log">
                <img src="./images/Logo.png" alt="">
            </a>
            <form action="#">
                <input type="text">
                <button>搜索</button>
            </form>

        </div>
    </div>
    <!--log和搜索框 -end -->
    <!-- 商品导航 start -->
    <div class="page-nav">
        <div class="container">
            <div class="all-cates">
                <h2>全部商品分类</h2>
            </div>
            <nav>
                <a href="#">服装城</a>
                <a href="#">美妆馆</a>
                <a href="#">尚品汇超市</a>
                <a href="#">全球购</a>
                <a href="#">闪购</a>
                <a href="#">团购</a>
                <a href="#">有趣</a>
                <a href="#">秒杀</a>
            </nav>
        </div>
    </div>
    <!-- 页面主要内容导航  -->
    <div class="page-main">
        <div class="container">
            <!-- 路径导航 -->
            <nav class="path-nav">
                <span><a href="#">手机、数码、通讯</a></span>
                <span><a href="#">手机</a></span>
                <span><a href="#">Apple</a></span>
                <span><a href="#">iphone6s系类</a></span>
            </nav>
            <!-- 放大镜和商品参数选项 -->
            <div class="product">
                <!-- 放大镜 -->
                <div class="product-preview">
                    <div class="zoom-box" id="zoomBox">
                        <div class="small-image">
                            <img src="./images/s3.png" alt="放大镜小图">
                            <div class="mask-box"></div>
                        </div>
                        <div class="large-image">
                            <img src="./images/b3.png" alt="放大镜大图">
                        </div>
                    </div>
                    <div class="thumb-box">
                        <button class="thumb-prev">&lt;</button>
                        <div class="thumb-content">
                            <div class="thumb-wrapper">
                                <!-- <img src="./images/s1.png" alt="商品预览缩略图">
                            <img src="./images/s2.png" alt="商品预览缩略图">
                            <img src="./images/s3.png" alt="商品预览缩略图">
                            <img src="./images/s1.png" alt="商品预览缩略图">
                            <img src="./images/s2.png" alt="商品预览缩略图">
                            <img src="./images/s3.png" alt="商品预览缩略图">
                            <img src="./images/s1.png" alt="商品预览缩略图">
                            <img src="./images/s2.png" alt="商品预览缩略图">
                            <img src="./images/s3.png" alt="商品预览缩略图"> -->

                            </div>
                        </div>
                        <button class="thumb-next">&gt;</button>
                    </div>
                </div>
                <!-- 商品参数选项 -->
                <div class="product-box">
                    <div class="product-price">
                        <h3 class="product-title">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                        <p class="product-message">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                        <div class="price-area">
                            <div class="price-row">
                                <div class="price-title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                                <div class="price-content">
                                    <span class="icon">&yen;</span>
                                    <span class="price" id="priceBox">5299</span>
                                    <span class="low">降价通知</span>
                                </div>
                                <div class="comment">
                                    累计评论 670000
                                </div>
                            </div>
                            <div class="price-row">
                                <div class="price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                                <div class="price-content">
                                    <span class="tag">加价购</span>
                                    满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品
                                </div>
                            </div>
                        </div>
                        <div class="support-row">
                            <div class="support-title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                            <div class="support-content">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
                        </div>
                        <div class="support-row">
                            <div class="support-title">配&nbsp;送&nbsp;至</div>
                            <div class="support-content">广东省 深圳市 宝安区</div>
                        </div>
                    </div>
                    <div class="product-options">
                        <div class="selected-box" id="selectedBox">
                            <!-- <div class="selected-tag">
                                银色
                                <span class="close">X</span>
                            </div> -->
                        </div>
                        <div id="optionsBox">
                            <!-- <dl>
                                <dt>选择颜色</dt>
                                <dd class="active">金色</dd>
                                <dd>银色</dd>
                                <dd>黑色</dd>
                            </dl>
                            <dl>
                                <dt>内存容量</dt>
                                <dd  class="active">16G</dd>
                                <dd>64G</dd>
                                <dd>128G</dd>
                                <dd>256G</dd>
                            </dl>
                            <dl>
                                <dt >选择版本</dt>
                                <dd  class="active">公开版</dd>
                                <dd>移动版</dd>
                            </dl>
                            <dl>
                                <dt>购买方式</dt>
                                <dd class="active">官方标配</dd>
                                <dd>移动优惠版</dd>
                                <dd>电信优惠版</dd>
                            </dl> -->
                        </div>

                        <div class="shopcart">
                            <div class="nums">
                                <input type="text" value="1" id="numInput">
                                <span class="plus" id="plusBtn">+</span>
                                <span class="minus" id="minusBtn">-</span>
                            </div>
                            <a href="#" class="btn">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 侧边栏选项卡、选择搭配、商品介绍 -->
            <div class="product-section">
                <!-- 侧边栏选项卡 -->
                <div class="product-siderbar" id="siderbarTab">
                    <div class="tab-nav">
                        <div class="tab-nav-item active">
                            相关分类
                        </div>
                        <div class="tab-nav-item">
                            推荐品牌
                        </div>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-panel-item active">
                            <ul class="cates">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="products">
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="product-title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part02.png" alt="">
                                    <p class="product-title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part03.png" alt="">
                                    <p class="product-title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part01.png" alt="">
                                    <p class="product-title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                                <li>
                                    <img src="./images/part02.png" alt="">
                                    <p class="product-title">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="price">¥6088.00</p>
                                    <a href="#">加入购物车</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-panel-item">
                            推荐品牌
                        </div>
                    </div>
                </div>
                <!-- 选择搭配、商品介绍 -->
                <div class="product-intro">
                    <!-- 商品搭配 -->
                    <div class="product-collocation">
                        <div class="choose-title">
                            选择搭配
                        </div>
                        <div class="choose-content">
                            <div class="master-product">
                                <img src="./images/l-m01.png" alt="">
                                <p id="masterPrice">&yen;5299</p>
                            </div>
                            <ul class="choose-products" id="chooseProducts">
                                <li>
                                    <img src="./images/dp01.png" alt="">
                                    <p class="title">Feless费勒斯VR</p>
                                    <P><input type="checkbox" name="" value="39" id="">39</P>
                                </li>
                                <li>
                                    <img src="images/dp02.png" alt="">
                                    <p class="title">Feless费勒斯VR</p>
                                    <p>
                                        <input type="checkbox" value="50" id="">
                                        50
                                    </p>
                                </li>
                                <li>
                                    <img src="images/dp03.png" alt="">
                                    <p class="title">Feless费勒斯VR</p>
                                    <p>
                                        <input type="checkbox" value="59" id="">
                                        59
                                    </p>
                                </li>
                                <li>
                                    <img src="images/dp04.png" alt="">
                                    <p class="title">Feless费勒斯VR</p>
                                    <p>
                                        <input type="checkbox" value="99" id="">
                                        99
                                    </p>
                                </li>
                            </ul>
                            <div class="total-products">
                                <p>已购<span id="totalNumBox">0</span>件商品</p>
                                <p>套餐价</p>
                                <p id="totalPrice">&yen;5299</p>
                                <a href="#">加入购物车</a>
                            </div>
                        </div>
                    </div>
                    <!-- 商品介绍 -->
                    <div class="product-intro-tab" id="introTab">
                        <div class="tab-nav">
                            <div class="tab-nav-item active">商品介绍</div>
                            <div class="tab-nav-item">规格与包装</div>
                            <div class="tab-nav-item">售后保障</div>
                            <div class="tab-nav-item">商品评价</div>
                            <div class="tab-nav-item">手机社区</div>
                        </div>
                        <div class="tab-panel">
                            <div class="tab-panel-item active">
                                <ul>
                                    <li>分辨率：1920*1080(FHD)</li>
                                    <li>后置摄像头：1200万像素</li>
                                    <li>前置摄像头：500万像素</li>
                                    <li>核 数：其他</li>
                                    <li>频 率：以官网信息为准</li>
                                    <li>品牌： Apple</li>
                                    <li>商品名称：APPLEiPhone 6s Plus</li>
                                    <li>商品编号：1861098</li>
                                    <li>商品产地：中国大陆</li>
                                    <li>商品毛重：0.51kg</li>
                                    <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                    <li>系统：苹果（IOS）</li>
                                    <li>像素：1000-1600万品毛重：0.51kg</li>
                                    <li>机身内存：64GB</li>
                                </ul>
                                <img src="./images/intro01.png" alt="">
                                <img src="./images/intro02.png" alt="">
                                <img src="./images/intro03.png" alt="">
                            </div>
                            <div class="tab-panel-item">规格与包装</div>
                            <div class="tab-panel-item">售后保障</div>
                            <div class="tab-panel-item">商品评价</div>
                            <div class="tab-panel-item">手机社区</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="guess-like">
        <div class="container">
            <div class="wrapper">
                <h4 class="like-title">猜你喜欢</h4>
                <ul class="like-list">
                    <li class="like-item">
                        <img src="./images/itemlike01.png" alt="猜你喜欢">
                        <div class="title">
                            <a href="#">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        </div>
                        <div class="price">
                            $3699.00
                        </div>
                        <div class="comment">
                            已有6人评价
                        </div>
                    </li>
                    <li class="like-item">

                        <img src="images/itemlike02.png" alt="猜你喜欢">

                        <div class="title">
                            <a href="#">Apple苹果iPhone 6s/6s Plus 16G 64G 128G</a>
                        </div>

                        <div class="price">
                            ¥ 4388.00
                        </div>

                        <div class="commet">
                            已有700人评价
                        </div>
                    </li>
                    <li class="like-item">

                        <img src="images/itemlike03.png" alt="猜你喜欢">

                        <div class="title">
                            <a href="#">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        </div>

                        <div class="price">
                            ¥ 3699.00
                        </div>

                        <div class="commet">
                            已有6人评价
                        </div>
                    </li>
                    <li class="like-item">

                        <img src="images/itemlike04.png" alt="猜你喜欢">

                        <div class="title">
                            <a href="#">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        </div>

                        <div class="price">
                            ¥ 3699.00
                        </div>

                        <div class="commet">
                            已有6人评价
                        </div>
                    </li>
                    <li class="like-item">

                        <img src="images/itemlike05.png" alt="猜你喜欢">

                        <div class="title">
                            <a href="#">DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</a>
                        </div>

                        <div class="price">
                            ¥ 3699.00
                        </div>

                        <div class="commet">
                            已有6人评价
                        </div>
                    </li>
                    <li class="like-item">
                </ul>
            </div>
        </div>
    </div>
    <!-- 页脚-->
    <div class="footer">
        <div class="container">
            <div class="footer-top">
                <div class="footer-item">
                    <h4>购物指南</h4>
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">会员介绍</a></li>
                        <li><a href="#">生活旅行/团购</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">购物指南</a></li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h4>配送方式</h4>
                    <ul>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">211限时达</a></li>
                        <li><a href="#">配送服务查询</a></li>
                        <li><a href="#">配送费收取标准</a></li>
                        <li><a href="#">海外配送</a></li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h4>支付方式</h4>
                    <ul>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">在线支付</a></li>
                        <li><a href="#">分期付款</a></li>
                        <li><a href="#">邮局汇款</a></li>
                        <li><a href="#">公司转账</a></li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h4>售后服务</h4>
                    <ul>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">价格保护</a></li>
                        <li><a href="#">退款说明</a></li>
                        <li><a href="#">返修/退换货</a></li>
                        <li><a href="#">取消订单</a></li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h4>特色服务</h4>
                    <ul>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">DIY装机</a></li>
                        <li><a href="#">延保服务</a></li>
                        <li><a href="#">尚品汇E卡</a></li>
                        <li><a href="#">尚品汇通信</a></li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h4>帮助中心</h4>
                    <img src="images/wx_cz.jpg" alt="二维码">
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-nav">
                    <a href="#">关于我们</a>
                    <span></span>
                    <a href="#">联系我们</a>
                    <span></span>
                    <a href="#">关于我们</a>
                    <span></span>
                    <a href="#">商家入驻</a>
                    <span></span>
                    <a href="#">友情链接</a>
                    <span></span>
                    <a href="#">关于我们</a>
                    <span></span>
                    <a href="#">营销中心</a>
                    <span></span>
                    <a href="#">友情链接</a>
                    <span></span>
                    <a href="#">关于我们</a>
                </div>
                <p class="address">
                    地址：上海市松江区谷阳北路166号大江商厦3楼
                </p>
                <p class="copyright">
                    京ICP备19006430号
                </p>
            </div>
        </div>
    </div>
<!-- 固定侧边栏导航 -->
    <div class="page-sidebar open" id="pageSidebar">
        <div class="sidebar-nav">
            <div class="menu-btn " id="menuBtn">               
            </div>
            <ul class="sidebar-list">
                <li class="nav-item">
                    <a href="#">
                        <i class="vip-icon"></i>
                        <span>商品会员</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="shopcar-icon"></i>
                        <span>购物车</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="follow-icon"></i>
                        <span>我的关注</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="history-icon"></i>
                        <span>我的足迹</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="message-icon"></i>
                        <span>我的消息</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="question-icon"></i>
                        <span>咨询</span>
                    </a>
                </li>
            </ul>
            <div class="nav-item" id="topBtn">
                <a href="javascript:;">
                    <i class="top-icon"></i>
                    <span>返回顶部</span>
                </a>
            </div> 
        </div>
        <div class="sidebar-content">
        </div>
    </div>


    <script src="./js/functions.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>